<!DOCTYPE html>
<html>
    <body>
        <script type="text/javascript" src="../common/echarts.min.js"></script>
        <script type="text/javascript" src="../common/jquery-3.7.1.js"></script>
        <link rel="stylesheet" href="../common/index.css">
        <title>立体库实时库位利用率看板</title>
        <script type="text/javascript">
            var myBarEcharts =null;
            var myPieEcharts =null;
            window.onload=function(){
                // 获取巷道
                var data=[];
                var roadwayNumber=Math.floor(Math.random() * 10) + 1;
                for (var i = 0; i < roadwayNumber; i++) {
                    data.push({
                        name: '巷道'+(i+1),
                        value: Math.floor(Math.random() * 1000) + 1
                    });
                }
                data.total=data.reduce((acc, cur) => acc + cur.value, 0);
                // 初始化 柱状图和饼图
                myBar(data);
                myPie(data);

                setInterval(function(){
                    for (var i = 0; i < data.length; i++) {
                        data[i].value=Math.floor(Math.random() * 1000) + 1;
                    }
                    data.total=data.reduce((acc, cur) => acc + cur.value, 0);
                    updateMyBar(data);
                    updateMyPie(data);
                },10000);
            }
            function myBar(data){
                myBarEcharts = echarts.init(document.getElementById('myBar'));
                var option = {
                    title: {
                        text:'实时利用率',
                        left: 'center', // 标题居中
                        textStyle: {
                            color: '#fff', // 设置标题颜色为红色
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: data.map(item => item.name),
                        axisLine:{
                            show:false,
                        },
                        axisTick:{
                            show:false
                        },
                        axisLabel:{
                            show:true,
                            color:'#fff',
                            fontSize:12,
                        }
                    },
                    yAxis: {
                        type: 'value',
                        show:false
                    },
                    series: [
                        {
                            data: data.map(item => item.value),
                            type: 'bar',
                            barWidth: 40,
                            label: {
                                show: true, // 显示标签
                                position: 'top', // 标签位置（top, inside, bottom, left, right 等）
                                color: '#fff', // 标签颜色
                                fontSize: 12, // 字体大小
                                formatter: function (value) {
                                    return (value.data/data.total*100).toFixed(2) + '%';
                                }
                            }
                        }
                    ]
                };
                myBarEcharts.setOption(option);
            }
            function updateMyBar(data){
                myBarEcharts.setOption({
                    series: [{
                        data: data.map(item => item.value)
                    }]
                });
            }
            function myPie(data){
                myPieEcharts = echarts.init(document.getElementById('myPie'));
                var option = {
                    title: {
                        text: '总货位数:'+ data.total,
                        left: 'center',
                        textStyle: {
                            color: '#fff', // 设置标题颜色为红色
                        },
                        padding:[0,0,20,0]
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        bottom: '5%',
                        left: 'center',
                        textStyle:{
                            color:'#fff'
                        }
                    },
                    series: [{
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        padAngle: 5,
                        itemStyle: {
                            borderRadius: 10,
                            normal:{
                                label:{
                                    show:true,
                                    formatter: "{b}:{c}",
                                    position:"inner",
                                    color:'#fff'
                                }
                            }
                        },
                        label: {
                            show: false,
                            position: 'center',
                            formatter: '{c}%', // 显示数据值，{c} 是默认的数据值占位符
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: data
                    }]
                };
                myPieEcharts.setOption(option);
            }
            function updateMyPie(data){
                myPieEcharts.setOption({
                    title: {
                        text: '总货位数:'+ data.total
                    },
                    series: [{
                        data: data
                    }]
                });
            }
        </script>
        <style>
            .title{
                color: #68d8fe;
                display: flex;
                justify-content: center;
                font-size: 3vw;
                padding-top: 1vw;
            }
            .echart{
                display: flex;
                align-items: center;
                height: 81%;
                margin-top: 5vw;
                
            }
            #myBar{
                width: 60%;
                height: 100%;
            }
            #myPie{
                width: 40%;
                height: 100%;
            }
        </style>
        <div class="main">
            <div class="title">立体库实时库位利用率看板</div>
            <div class="echart">
                <div id="myBar"></div>
                <div id="myPie"></div>
            </div>
        </div>
    </body>
</html>